import React from 'react';

import { ModalContext } from '@/shared/context/ModalContext';
import { useMetaTag } from '@/shared/lib/hooks';
import { useAppDispatch } from '@/shared/store';
import { Button, ButtonVariants, FlexWrapper, Modal, Snackbar, Title } from '@/shared/ui';
import { useSnackbar } from 'notistack';
import s from 'src/entities/auth/ui/ConfirmExitModal/ConfirmExitModal.module.scss';
import { useWindowSize } from 'usehooks-ts';

import { setPremium } from '../../model/actions';

export const TurnOffPremium = () => {
  const { closeModal } = React.useContext(ModalContext);
  const { enqueueSnackbar } = useSnackbar();
  const dispatch = useAppDispatch();
  useMetaTag(true, '#999999');
  const { width } = useWindowSize();
  return (
    <Modal className={s.modal} isOpen onCloseClick={closeModal}>
      <FlexWrapper gap={width > 1024 ? 32 : 24} isCenter>
        <Title size="modal-size" title="Отключить подписку?" />
        <Title size="m-no-bold" title="С 27 августа платные функции станут недоступны" />
        <Button
          onClick={() => {
            dispatch(setPremium());
            closeModal();
            enqueueSnackbar('Подписка отключена', {
              variant: 'success',
              content: (key, message) => <Snackbar id={key} message={message} size="md" variant="success" />,
            });
          }}
          style={{ marginBottom: width > 1024 ? '24px' : '16px' }}
          variant={ButtonVariants.Danger}
        >
          Отключить
        </Button>
      </FlexWrapper>
      <FlexWrapper isCenter>
        <Button className={s.exit} onClick={closeModal} variant={ButtonVariants.Link}>
          Отмена
        </Button>
      </FlexWrapper>
    </Modal>
  );
};
